<template>
	<view class="flex flex-column justify-center align-center">
		<view class="mt-3 pt-2 pb-3 "
			style="background-color: #fff;  width: 90%; border-radius: 25rpx; box-shadow: 0px 0px 4px #55557f; opacity: 0.9;">
			<view class=" flex  flex-column align-center" style="color: #4c1d95; ">
				<!-- 头像 -->
				<view class="my-3" style="position: relative;">
					<view class="avater"
						style="position: relative; width: 150rpx; height: 150rpx; overflow: hidden;  border-radius: 150rpx; border: 2px solid #a855f7;">
						<image :src="submitInfo.avater" mode="aspectFill" style="height: 100%; width: 100%;">
						</image>
					</view>
					<view class="sex flex justify-center align-center"
						:style="{color:submitInfo.sex == '男'? 'aqua':'#fe68ca' }"
						style="width: 50rpx; height: 50rpx; font-size: 35rpx; border-radius: 50rpx; background-color:#55557f; position: absolute; bottom: 0; right: 0;">
						<i :class="submitInfo.sex == '男'? 'el-icon-male':'el-icon-female'"></i>
					</view>
				</view>
				<!-- 名字 -->
				<view class="top-right info ml-2 flex flex-column align-start justify-center">
					<view class="nickname" style="font-size: 50rpx; font-weight: bold;">
						{{submitInfo.nickname}}
					</view>
				</view>
			</view>

			<view class="flex flex-wrap justify-center align-center mt-4 mx-4" style=" ">
				<view class="tags flex justify-center align-center mb-2 ml-1" v-for="item in tags"
					v-if="item.state==true"
					style="color: #fff; border-radius: 50rpx; height: 35rpx; font-size: 26rpx; padding: 15rpx 40rpx; background-color: #7b6dd9;">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="mt-3 "
			style="background-color: #fff;  width: 90%; border-radius: 25rpx; box-shadow: 0px 0px 4px #55557f; opacity: 0.9;">
			<view class="rate m-3">
				<view class="tag flex justify-evenly align-center my-2" v-for="item in rateArr">
					<el-rate v-model="item.value" allow-half :colors="colors">
					</el-rate>
					<text style="color: #5d31a0; font-weight: bold; font-size: 30rpx;">{{item.text}}</text>
				</view>
				<u-line></u-line>
			</view>
            <view class="comment m-3">
            	<el-input
            	  type="textarea"
            	  :rows="5"
            	  placeholder="留下你的评论吧~"
            	  v-model="textarea">
            	</el-input>
            </view>
		</view>
		<u-button  text="提交" @click="submit"
			color="linear-gradient(to right bottom,  rgb(130, 88, 186),rgb(114, 135, 254))"
			style="width: 90%; margin-top: 30rpx; border-radius: 25rpx;"></u-button>
	</view>
</template>

<script>
	const db = uniCloud.database()
	const addChatList = uniCloud.importObject('addChatList', {
		customUI: true
	})
	export default {
		data() {
			return {
				submitInfo: {},
				tags: [],
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				rateArr: [{
						value: null,
						text: "标签符合度"
					},
					{
						value: null,
						text: "授课专业度"
					},
					{
						value: null,
						text: "回购意愿度"
					}
				],
				 textarea: '',
				 userInfo:{}
			};
		},
		async onLoad(e) {
			uni.showLoading({

			})
			uni.getStorage({
				key: 'jiajiao_demo_account',
				success: res => {
					this.userInfo = res.data
				}
			})
			await db.collection('order').doc(e.order_id).field('tags').get().then(res => {
				this.tags = res.result.data[0].tags
			})
			await db.collection('jiajiao_users').doc(e.submit_id).field('avater,nickname,sex').get().then(res => {
				this.submitInfo = res.result.data[0]
			})
			uni.hideLoading()
		},
		methods:{
			 submit(){
				if(!this.rateArr.find(item=>item.value==0)&&this.textarea!='')
				{
					uni.showLoading({
						
					})
					let object={
						submit_user:{nickname:this.userInfo.nickname,avater:this.userInfo.avater},
						rateArr:[this.rateArr[0].value,this.rateArr[1].value,this.rateArr[2].value],
						comment:this.textarea
					}
				  	addChatList.addComment(this.submitInfo._id,object).then(res=>{
						uni.hideLoading()
						uni.switchTab({
							url:"/pages/self/self"
						})
					})
				}
				else{
					uni.showToast({
						title:"不能为空噢",
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1e5fe;
	}
</style>